<script setup>
    import {defineProps, nextTick, ref, watch} from 'vue'
    import {Chart} from '@antv/g2';

    const pops = defineProps({
        data: Array
    })
    const chartEle = ref(null)
    const initChart = () => {
        chartEle.value = new Chart({
            container: 'chart_reader',
            autoFit: true,
            height: 430
        });


        chartEle.value.data(pops.data.visitorTrend)
        chartEle.value
            .area()
            .encode('x', 'month_name')
            .encode('y', 'total')
            .axis('y', {labelFill: '#ffffff', title: false})
            .axis('x', {labelFill: '#ffffff', title: false})
            .style('fill','#00effb')
            .encode('shape', 'smooth'); // 'line', 'smooth', 'vh', 'hv', 'hvh'

        chartEle.value.render();

    }
    watch(
        () => pops.data,
        (newVal, oldVal) => {
            //console.log(pops.data)
            if (newVal === oldVal) return
            if (newVal.length < 1) return
            //chartEle.value.changeData(pops.data)
            if (oldVal.length > 0) chartEle.value.destroy()
            nextTick(initChart)
        },
        {deep: true}
    );
</script>

<template>
    <div>
        <div class="threeVal">
            <div class="-item anim1">
                <div>今日来访</div>
                <div>{{ pops.data.todayVisitorNums }}</div>
            </div>
            <div class="-item anim3">
                <div>本月来访</div>
                <div>{{ pops.data.monthVisitorNums }}</div>
            </div>
            <div class="-item anim2">
                <div>今年来访</div>
                <div>{{ pops.data.yearVisitorNums }}</div>
            </div>
        </div>
        <div id="chart_reader"></div>
    </div>
</template>

<style scoped>
.threeVal {
    display: flex;
    align-items: center;
}

.-item {
    background-color: rgba(0, 239, 250, .1);
    color: white;
    padding: 15px;
    align-items: center;
    display: flex;
    border-radius: .3ex;
    margin: 10px;
    flex: 1;
}

.-item:before {
    display: inline-block;
    content: " ";
    width: 25px;
    height: 25px;
    border-radius: 100px;
    background-color: rgba(0, 239, 250, .2);
    margin-right: 10px;
}

.-item > div:first-child {
    font-size: .8rem;
    margin-right: 5px;
}

.-item > div:last-child {
    flex: 1;
    text-align: right;
    font-size: large;
    color: #00effb;
}

.-item.anim1:before {
    animation: turnOnLight 1s infinite linear;
}

.-item.anim2:before {
    animation: turnOnLight 1s infinite linear;
}

.-item.anim3:before {
    animation: turnOnLight 1s infinite linear;
}

@keyframes turnOnLight {
    0% {
        background-color: rgba(0, 239, 250, .05);
    }
    50% {
        background-color: rgba(0, 239, 250, .9);
    }
    100% {
        background-color: rgba(0, 239, 250, .05);
    }
}
</style>